<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ui</title>
</head>
<body>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="component-ui.css">

<div class="mod mod-inline-block">
    <h2>登录用户</h2>
    <div class="user">
    	<img class="user-portrait" src="https://avatars1.githubusercontent.com/u/10265829?s=96&amp;login-user"><span class="user-name">我是user9 (id:user9)</span>
    </div> 
</div>

<div class="mod mod-inline-block">
    <h2>新消息</h2>
    <div id="messages"><div>
    	<ul class="message">
    		<li class="message-type">消息类型：RC:TxtMsg</li>
    		<li class="message-uid">消息UId：5H3Q-GIE2-S43A-D3ED</li>
    		<li class="message-content">消息正文：这是一条来自React demo的消息</li>
    		<li class="message-sender">发送者：user9</li>
    	</ul>
    </div></div>
</div>

<div class="mod mod-conversation">
    <h2>会话列表</h2>
    <div id="conversations"><div>
    	<ul class="conversation">
    		<li class="conversation-type">会话类型： 1</li>
    		<li class="conversation-type">会话对象： user8</li>
    		<li>
    			<ul class="message">
    				<li>
    					<div class="user">
    						<img class="user-portrait" src="https://avatars1.githubusercontent.com/u/14857191?s=96&amp;v=4">
    						<span class="user-name">李四 (id:sender)</span>
    					</div>
    				</li>
    				<li class="message-sender">发送者Id：user9</li>
    				<li class="message-type">消息类型：RC:TxtMsg</li>
    				<li class="message-uid">消息UId：5H3Q-GRDK-K43A-D3ED</li>
    				<li class="message-content">消息正文：这是一条来自React demo的消息</li>
    			</ul>
    		</li>
    	</ul>
	</div>
</div>

</body>
</html>